<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{
		padding: 0;
		margin: 0;
	}
		#box{
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			left:0px;
			/*
			这里的left设置会影响运行是向左还是向右
            根据下面的 speed中的1000为标准，小于1000向左
            大于1000，向右 
			*/
			border: 1px solid #000;
		}
        
        #bor800{
        	width: 1px;
        	height: 800px;
        	background-color: #000;
        	left: 800px;
        	top: 0;
        	position: absolute;
        }

        #bor1200{
            width: 1px;
            height: 800px;
            background-color: #000;
            left: 1200px;
            top: 0;
            position: absolute;
        }

        input[type='text']{
        	width: 500px;
        	display: block;
        	margin: 10px;
        }
	</style>
    <script type="text/javascript">
    var timer = 'null';
    function startMove(iTarget){
    	box=document.getElementById('box');
    	echo = document.getElementById('echo');
    	offsetLeft = document.getElementById('offsetLeft');
        mathAbs = document.getElementById('mathAbs');
    	clearInterval(timer);
    	timer = setInterval(function(){
    	
             var speed ;

              if (box.offsetLeft<iTarget) {
                  speed = 7;
              }else{
                  speed = -7;
              };

             echo.value = "speed速度变化："+speed;
             offsetLeft.value =  "box.offsetLeft速度变化："+box.offsetLeft;
             mathAbs.value = "绝对值："+Math.abs(iTarget-box.offsetLeft);

             if (Math.abs(iTarget-box.offsetLeft)<=7) {
                 clearInterval(timer);
                 box.style.left=iTarget+'px';
             }else{
                 box.style.left=box.offsetLeft+speed+"px";
            };

    	},30);
    };

    </script>
</head>
<body>
	<h1>请注意观察运行数据变化</h1>
	<input type="text" id="echo" value="">
	<input type="text" id="offsetLeft" value="">
    <input type="text" id="mathAbs" value="">
	<input type="button" onclick="startMove(800)" value="到800" >
    <input type="button" onclick="startMove(1200)" value="到1200" >
<div id="box"></div>
<div id="bor800"></div>
<div id="bor1200"></div>
</body>
</html>